<template>
  <div id="app">
    <back class="back"></back>
    <div id="viewer"></div>
  </div>
</template>

<script>
import back from './back.vue'
import PhotoSphereViewer from 'photo-sphere-viewer'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
export default {
  name: 'panorama',
  data () {
    return {
    }
  },
  mounted() {
      this.initPhotoSphere()
  },
  methods: {
    initPhotoSphere() {
      this.PSV = PhotoSphereViewer({
        panorama: this.$route.query.link,
        // panorama: '/2.jpg',
        size: {
          width: '100%',
          height: '100vh'
        },
        container: document.getElementById("viewer"),
        navbar: [
          'autorotate',
          'zoom',
          'caption'
        ]
      })
    },
    destroy() {
      this.$destroy
			document.getElementById('viewer').innerHTML = "";
    }
  },
  components: {
    back
  }
}
</script>

<style scoped>
  #viewer {
    width: 100%;
    height: 100%;
    display: flex;
  }


</style>
